<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('请假起草')"/>
    <link rel="stylesheet" th:href="@{/layuimini/lib/jq-module/zyupload/zyupload-1.0.0.min.css}" media="all">
    <style>

        .mainBox {
            width: 90%;
            margin-top: 20px;
            position: absolute;
            top: 0px;
            left: 0px;
            bottom: 50px;
            overflow: auto;
        }

        .bottom {
            width: 100%;
            position: absolute;
            bottom: 0px;
            left: 0px;
            height: 50px;
            line-height: 50px;
            background-color: #F8F8F8;
            border-top: 1px solid #eee;
        }

        .button-container {
            position: absolute;
            right: 15px;
        }
        body{
            background-color: #fff;
        }

    </style>
</head>
<body>
<form class="layui-form" th:object="${leave}" lay-filter="formObj">
    <div class="mainBox">
        <div class="main-container">
            <input name="id" th:field="*{id}" type="hidden">
            <input type="hidden" name="processId" id="processId" th:field="*{processId}" />
            <input type="hidden" name="userId" th:field="*{userId}"/>
            <div class="layui-form-item">
                <label class="layui-form-label">流程标题</label>
                <div class="layui-input-block">
                    <input type="text" id="processTitle" name="processTitle" th:field="*{processTitle}"
                           readonly class="layui-input" />
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">请假人工号</label>
                <div class="layui-input-block">
                    <input type="text" id="userSn" name="userSn" th:field="*{userSn}"
                           readonly class="layui-input" />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">请假人名称</label>
                <div class="layui-input-block">
                    <input type="text" name="username" th:field="*{username}"
                           placeholder="请输入请假人名称" class="layui-input" />
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">假别id</label>
                <div class="layui-input-block">
                    <input type="text" name="leaveTypeName" th:field="*{leaveTypeName}"
                           placeholder="请输入假别id" class="layui-input" />
                </div>
            </div>
            <div class="layui-form-item">

                <div class="layui-inline">
                    <label class="layui-form-label">开始日期</label>
                    <div class="layui-input-inline">
                        <input type="text" name="startDateStr" th:field="*{startDateStr}"
                            placeholder="请输入开始日期" class="layui-input" />
                    </div>
                </div>
                <div class="layui-inline">
                    <select name="startDateFlag">
                        <option value="am">上半段</option>
                        <option value="pm">下半段</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">结束日期</label>
                    <div class="layui-input-inline">
                        <input type="text" name="endDateStr" th:field="*{endDateStr}"
                            placeholder="请输入结束日期" class="layui-input" />
                    </div>
                </div>
                <div class="layui-inline">
                    <select name="endDateFlag">
                        <option value="am">上半段</option>
                        <option value="pm" selected>下半段</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">请假天数</label>
                <div class="layui-input-block">
                    <input type="text" name="days" th:field="*{days}"
                        readonly class="layui-input" />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">请假说明</label>
                <div class="layui-input-block">
                    <input type="text" name="remark" th:field="*{remark}"
                           placeholder="请假说明" class="layui-input" />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">附件</label>
                <div class="layui-input-block">

                    <input type="hidden" id="fileId" name="fileId" th:field="*{fileId}"/>
                    <input id="zyupload" class="layui-input" />
                    <div id="preview" class="upload_preview">


                    </div>

                </div>
            </div>
        </div>


    </div>
    <div class="bottom">
        <div class="button-container">
            <button type="submit" class="layui-btn layui-btn-primary layui-btn-sm" id="saveBtn" lay-submit=""
                    lay-filter="leave-update">
                <i class="layui-icon layui-icon-ok"></i>
                暂存
            </button>
            <button type="button" class="layui-btn layui-btn-sm" id="submit">
                <i class="layui-icon layui-icon-refresh"></i>
                提交
            </button>
            <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" id="shutdown">
                <i class="layui-icon layui-icon-ok"></i>
                删除流程
            </button>
        </div>
    </div>
</form>
</body>
<th:block th:include="include :: footer"/>
<script th:src="@{/layuimini/lib/jq-module/zyupload/zyupload-1.0.0.min.js}" charset="utf-8"></script>
<script th:inline="javascript">
    layui.use(['form', 'jquery', 'laydate', 'dictionary'], function () {
        let form = layui.form;
        let $ = layui.jquery;
        let laydate = layui.laydate;

        let prefix = pName + "/kq/leave/";

        laydate.render({
            elem: '#startDateStr'
        });
        laydate.render({
            elem: '#endDateStr'
        });
        $('#username').click(function () {
            userUtil.initUserSelect("userId", "username",function (params) {
                console.log(params)
            }, "考勤");
        })
        $('#zyupload').click(function () {
            fileUtil.initFileUpload("fileId", "zyupload", true);
        })
        $('#submit').on('click', function(){
            window.sendData(true);
            return false;
        });
        $('#shutdown').on('click', function(){
            window.shutdown();
            return false;
        });
        form.on('submit(leave-update)', function (data) {
            window.save(data);
            return false;
        });

        window.save = function(data) {
            let loading = layer.load();
            for (var key in data.field) {
                var type = $(data.form).find("input[name='" + key + "']").attr("type");
                if (type == "checkbox") {
                    var value = "";
                    $(data.form).find("input[name='" + key + "']:checked").each(function () {
                        value += $(this).val() + ",";
                    })
                    if (value != "") {
                        value = value.substr(0, value.length - 1);
                        data.field[key] = value;
                    }

                }
            }
            $.ajax({
                url: prefix + 'saveByProId',
                data: JSON.stringify(data.field),
                dataType: 'json',
                contentType: 'application/json',
                type: 'post',
                success: function (result) {
                    layer.close(loading);
                    if (result.code == 1) {
                        layer.msg(result.msg, {icon: 1, time: 1000}, function () {
                          //  top.layer.close(top.layer.getFrameIndex(parent.window.name));
                        });
                    } else {
                        layer.alert(result.msg, {icon: 2});
                    }
                }
            })
            return false;
        }
        window.sendData = function (flag) {

            let loading = layer.load();
            $("#saveBtn").click();
            $.ajax({
                url: pName + '/kq/leave/next/' + $('#processId').val(),
                data: JSON.stringify({flag: flag}),
                dataType: 'json',
                contentType: 'application/json',
                type: 'post',
                success: function (result) {
                    layer.close(loading);
                    if (result.code == 1) {
                        layer.msg(result.msg, {icon: 1, time: 1000}, function () {
                        });
                    } else {
                        layer.alert(result.msg, {icon: 2});
                    }
                }
            })

        }
        window.removeFile = function (id, elName) {
            let loading = layer.load();
            $.ajax({
                url: pName + '/system/file/remove/' + id,
                dataType: 'json',
                contentType: 'application/json',
                type: 'delete',
                success: function (result) {

                    layer.close(loading);
                    if (result.code == 1) {
                        layer.msg(result.msg, {icon: 1, time: 1000}, function () {
                            if(!!elName) {
                                let newNames = "", newIds = "";
                                let names = $('#zyupload').val();

                                let ids = $('#fileId').val();
                                let index = parseInt(elName.split("_")[1]);
                                let arr = names.split(",");
                                let idarr = ids.split(",");
                                for (let i = 0; i < arr.length; i++) {
                                    if (index != i) {
                                        newNames += arr[i] + ",";
                                        newIds += idarr[i] + ",";
                                    }
                                }

                                $('#zyupload').val(newNames.substr(0, newNames.length - 1));
                                $('#fileId').val(newIds.substr(0, newIds.length - 1));
                                $('#saveBtn').click();
                                initFileList($('#fileId').val());
                            }
                        });
                    } else {
                        layer.alert(result.msg, {icon: 2});
                    }
                }
            })
        }
        window.shutdown = function () {
            let loading = layer.load();
            // 关闭弹出层后执行的操作
            $.ajax({
                url: pName + '/process/deleteByInsId?instanceId=' + $('#processId').val(),
                dataType: 'json',
                contentType: 'application/json',
                type: 'post',
                success: function (result) {
                    layer.close(loading);
                    if (result.code == 1) {
                        if(!!$("#id").val()){
                            let loading = layer.load();
                            $.ajax({
                                url: prefix + "remove/" + $("#id").val(),
                                dataType: 'json',
                                type: 'delete',
                                success: function (result) {
                                    layer.close(loading);
                                    if (result.code == 1) {

                                        layer.msg(result.msg, {icon: 1, time: 1000}, function () {
                                            top.layer.close(top.layer.getFrameIndex(parent.window.name));
                                        });
                                    } else {
                                        layer.alert(result.msg, {icon: 2});
                                    }
                                }
                            })
                        } else {
                            layer.msg(result.msg, {icon: 1, time: 1000}, function () {
                                top.layer.close(top.layer.getFrameIndex(parent.window.name));
                            });
                        }


                        return false;
                    } else {
                        layer.alert(result.msg, {icon: 2});
                    }
                },

                error: function (err) {
                    console.log(err);
                    layer.alert("服务报错", {icon: 2});
                }
            })

        }
        function isImageExtension(filename) {
            // 正则表达式匹配常见的图片文件扩展名
            const imageExtensionsRegex = /\.(jpg|jpeg|png|gif|webp)$/i;
            return imageExtensionsRegex.test(filename);
        }
        function initFileList(fileIds) {
            if(fileIds != null && fileIds != ""){
                let loading = layer.load();
                $.ajax({
                    url: pName + '/system/file/filesInfo?fileIds=' + fileIds,
                    dataType: 'json',
                    contentType: 'application/json',
                    type: 'post',
                    success: function (result) {
                        layer.close(loading);
                        if (result.code == 1) {
                            let html = "";
                            let index = 0;
                            result.data.forEach(function (d) {
                                if(index == 0){
                                    $('#zyupload').val(d.fileName);
                                } else {
                                    $('#zyupload').val($('#zyupload').val() + "," + d.fileName);
                                }
                                let imgUrl = pName + "/layuimini/lib/jq-module/zyupload/images/fileType/file.png";
                                if(isImageExtension(d.fileName)){
                                    imgUrl = pName + "/system/file/download/" + d.id;
                                }
                                html += '<div id="uploadList_'+index+'" class="upload_append_list">' +
                                    '     <div class="file_bar">' +
                                    '         <div style="padding:5px;">' +
                                    '             <p class="file_name" title="'+d.fileName+'">' +
                                    '             '+d.fileName+'</p>' +
                                    '             <span class="file_edit" data-index="'+index+'" title="编辑"></span>' +
                                    '             <span class="file_del" data-index="'+index+'" title="删除" onclick="window.removeFile(\''+d.id+'\',\'uploadList_'+index+'\')"></span>' +
                                    '         </div>' +
                                    '     </div>' +
                                    '     <a style="height:115px;width:140px;" href="#" class="imgBox">' +
                                    '         <div class="uploadImg" style="width:125px;max-width:125px;max-height:105px;">' +
                                    '             <img id="uploadImage_'+index+'"class="upload_image" src="'+ imgUrl +'"' +
                                    '                 style="width:125px;">' +
                                    '         </div>' +
                                    '     </a>' +
                                    '     <p id="uploadSuccess_'+index+'" class="file_success" style="display: block"></p>' +
                                    ' </div>';
                                index++;
                            })
                            $('#preview').html("");
                            $('#preview').append(html);
                            $(".upload_append_list").hover(function(e) {
                                $(this).find(".file_bar").addClass("file_hover")
                            }, function(e) {
                                $(this).find(".file_bar").removeClass("file_hover")
                            })
                            return false;
                        } else {
                            layer.alert(result.msg, {icon: 2});
                        }
                    },
                    error: function (err) {
                        console.log(err);
                        layer.alert("服务报错", {icon: 2});
                    }
                })

            }
        }
        let fileIds =  $('#fileId').val();
        initFileList(fileIds);
    });

</script>
</html>